<template>
    <div class="content-container">
        <div class="header">
            <el-radio-group v-model="timeMode" size="medium" class="topTab" @change="handleTabChange">
                <el-radio-button label="单时刻"></el-radio-button>
                <el-radio-button label="时间变化图"></el-radio-button>
            </el-radio-group>
        </div>

        <div class="draw-container">
            <div class="function-area">
                <el-select v-model="date" placeholder="请选择日期" v-if="timeMode == '单时刻'" @change="getImgData">
                    <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.value"
                        :value="item.value"
                    >
                    </el-option>
                </el-select>
                <span class="dateInfo" v-else>{{dateInfo}}</span>

                <div>
                    <el-button type="primary" size="medium" round @click="imgDonwload">图片导出</el-button>
                </div>
            </div>

            <div class="draw-area">
                <img :src="img" />
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "Concentration",
    data() {
        return {
            timeMode: '单时刻',
            img: undefined,
            options: [],
            date: "",
            dateInfo: '',
            timeModule: "first"
        };
    },
    mounted(){
        this.getSelectData();
    },
    methods: {
        getSelectData(){    //获取日期选择数据
            let SelectData = ['2020_M09_D06_0000', '2020_M09_D06_0100', '2020_M09_D06_0200', '2020_M09_D06_0300', '2020_M09_D06_0400', '2020_M09_D06_0500'];
            for(let i in SelectData){
                this.options.push({value: SelectData[i]});
            }
            this.date = this.options[0].value;
            this.getImgData(this.options[0].value)
            
            const start = "2020_M09_D06_0000";
            const end = "2020_M09_D06_1200"
            this.dateInfo = start + " 至 " + end;
        },
        getImgData(date){
            let imgName = date + '.png'
            const img = require("@/assets/img/Atmospheric diffusion/concentration/" + imgName)
            this.img = img
        },
        handleTabChange(timeMode){
            if(timeMode == '时间变化图') {
                const img = require('@/assets/img/Atmospheric diffusion/concentration/2020_M09_D06_0000至2020_M09_D06_1200.gif')
                this.img = img
            }
            else this.getImgData(this.options[0].value)
        },
        imgDonwload(){
            const elink = document.createElement("a");
            elink.download = (this.timeMode=='单时刻'?this.date:this.dateInfo) + (this.timeMode=='单时刻'?".png":".gif");
            elink.style.display = "none";
            elink.href = this.img;
            document.body.appendChild(elink);
            elink.click();
            URL.revokeObjectURL(elink.href); // 释放URL 对象
            document.body.removeChild(elink);
        }
    }
}
</script>

<style lang="scss" scoped>
    @import "@/assets/css/ADcontent.scss";
</style>